<template>
    <div id="upload">
        <div class="content">
            <div class="upload_notice"></div><!-- 单个小球是用clss，多个小球是用id -->
            <div class="ball"></div>
            <!-- <i class="upload_icon"></i> -->
            <div class="upload_box">
                <form class="upload_form" enctype="multipart/form-data" target="fileUpload">
                <div class="upload_select_file">
                    <div><h3>给它取个名字吧</h3><input id="fileName" class="upload_input_select_fileName" type="text" value="给你的资源取个名字吧！" v-model="fileName"></div>
                    <div><h4>做出你的选择</h4><input enctype="multipart/form-data" id="file" class="upload_input_select_file" type="file" name="file" multiple="multiple" value="添加资源"></div>
                    <div><h5>它需要一个封面哦</h5><input enctype="multipart/form-data" id="fileCover" class="upload_input_select_cover" type="file" accept="image/*" name="filecover" multiple="multiple" value="选择封面"></div>
                </div>
                <br>
                <div class="upload_file_info">
                    <div>它需要一个类别<input id="fileCategory" type="text" value="给你的资源选一个类别吧！" v-model="fileCategory"></div>
                    <div>最高可以拥有五个标签哦！<input id="fileTag1Name" type="text" value="给你的资源选一个标签吧！" v-model="fileTag1Name"></div>
                <input class="upload_input_button" type="submit" value="点击上传" @click="uploadFile()">
                </div>
                <iframe name="fileUpload" style="display:none"></iframe>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import {setCookie,getCookie} from '../assets/js/cookie.js'
export default {
    mounted(){
        setTimeout(function(){
                   this.ball();
                }.bind(this),100)
    },
    data(){
        return{
            fileName:'',
            fileCategory:'',
            fileTag1Name:'',
            theUserName:'',

        }
    },
    methods:{
        ball(){
            //第一个小球
            var aBall=document.querySelector('.upload_notice');
            var leftNum=2.5;
            var topNum=2.5;
            var leftMax=document.documentElement.clientWidth-aBall.clientWidth;
            var topMax=document.documentElement.clientHeight-aBall.clientHeight;
            window.resize=function(){
            leftMax=document.documentElement.clientWidth-aBall.clientWidth;
            topMax=document.documentElement.clientHeight-aBall.clientHeight;
        }
        setInterval(function(){              //为小球的运动新建一个计时器
            var Left = aBall.offsetLeft+leftNum,    //小球每次运动完之后，距离浏览器左边边框的距离：上一次距离边框的距离加上这次运动的距离，下一行代码同理
            Top = aBall.offsetTop+topNum;
            //判断当小球向左移动的位置大于之前限定的最大距离或者小于0时，也就是超出浏览器窗口的左右边框时，
            //使他运动的方向取反leftNum = -leftNum，下面Top的判断同理。
            if(Left>=leftMax){               
                Left = leftMax;
                leftNum = -leftNum;
                aBallBg(aBall);     //传参数到下面的获取随机颜色的function
            }else if(Left<=0){
                Left = 0;
                leftNum = -leftNum;
                aBallBg(aBall);
            };
            if(Top>=topMax){
                Top = topMax;
                topNum = -topNum;
                aBallBg(aBall);
            }else if(Top<=0){
                Top = 0;
                topNum = -topNum;
                aBallBg(aBall);
            };
            aBall.style.left = Left+'px';      
            aBall.style.top = Top+'px';
        },30);
            function aBallBg(obj){             //随机获取小球颜色
                var r = Math.floor(Math.random()*256);
                var g = Math.floor(Math.random()*256);
                var b = Math.floor(Math.random()*256);
                obj.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
            }
            //第二个小球
            var bBall=document.querySelector('.ball');
            var leftSpeed=3;
            var topSpeed=3.5;
            var leftMax=document.documentElement.clientWidth-bBall.clientWidth;
            var topMax=document.documentElement.clientHeight-bBall.clientHeight;
            window.resize=function(){
            leftMax=document.documentElement.clientWidth-bBall.clientWidth;
            topMax=document.documentElement.clientHeight-bBall.clientHeight;
        }
        setInterval(function(){              //为小球的运动新建一个计时器
            var Left = bBall.offsetLeft+leftSpeed,    //小球每次运动完之后，距离浏览器左边边框的距离：上一次距离边框的距离加上这次运动的距离，下一行代码同理
            Top = bBall.offsetTop+topSpeed;
            //判断当小球向左移动的位置大于之前限定的最大距离或者小于0时，也就是超出浏览器窗口的左右边框时，
            //使他运动的方向取反leftNum = -leftNum，下面Top的判断同理。
            if(Left>=leftMax){               
                Left = leftMax;
                leftSpeed = -leftSpeed;
                bBallBg(bBall);     //传参数到下面的获取随机颜色的function
            }else if(Left<=0){
                Left = 0;
                leftSpeed = -leftSpeed;
                bBallBg(bBall);
            };
            if(Top>=topMax){
                Top = topMax;
                topSpeed = -topSpeed;
                bBallBg(bBall);
            }else if(Top<=0){
                Top = 0;
                topSpeed = -topSpeed;
                bBallBg(bBall);
            };
            bBall.style.left = Left+'px';      
            bBall.style.top = Top+'px';

        },30);
            function bBallBg(obj){             //随机获取小球颜色
                var r = Math.floor(Math.random()*256);
                var g = Math.floor(Math.random()*256);
                var b = Math.floor(Math.random()*256);
                obj.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
            }
        },
        uploadFile(event){
            //得到文件
            var fileM=document.querySelector("#file")
            var fileObj=fileM.files[0];
            var formData = new FormData();
            formData.append('file',fileObj)
            console.log(fileObj)
            //加入标题
            formData.append('fileName',this.fileName)
            formData.append('userName',this.theUserName=getCookie('username'))
            formData.append('fileCategory',this.fileCategory)
            formData.append('fileTag1Name',this.fileTag1Name)
            console.log(File.name)
            //得到封面图
            fileM=document.querySelector("#fileCover")
            fileObj=fileM.files[0]
            formData.append('fileCover',fileObj)
            console.log(fileObj)
            let config = {
                headers:{'Content-Type':'multipart/form-data'}
            }
            console.log(formData.getAll)
            console.log(formData.getAll("file"))
            console.log(formData.getAll("fileName"))
            console.log(formData.getAll("fileCover"))
            console.log(formData.getAll("userName"))
            console.log(formData.getAll("fileCategory"))
            console.log(formData.getAll("fileTag1Name"))
            axios.post('http://localhost:8080/resource/uploadfile',formData,config).then(res=>{
                console.log(config)
                console.log(res)
            })
        },
    }
}
</script>

<style scoped>
#upload{
    width: 100%;
    height: 100%;
}
.upload_form{
    height: 100%;
    margin-left: 45%;
    }
.content{
    width: 100%;
    height: 100%;
}
.upload_box{
    width: 100%;
    height: 100%;
}
.upload_notice{
    width: 120px;
    height: 120px;
    border-radius: 100%;
    z-index: -1;
    position: absolute;
    top:0;
    left: 0;
    background-color: dodgerblue;
}
.ball{
    width: 120px;
    height: 120px;
    border-radius: 100%;
    z-index: -1;
    position: absolute;
    top:0;
    left: 0;
    background-color:blueviolet;
}
/* .upload_icon{
  display: inline-block;
  width: 128px;
  height: 128px;
  background-image: url('~@/../static/images/upload_icon3.png');
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  top: 42%;
  left: 45%;
}
.upload_icon:hover{
        border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
} */
/* .upload_input_select_fileName{

} */
.upload_select_file{
    text-align: center;
    width: 200px;
    height: 300px;
    background-color:cornflowerblue;
    border-radius:25px;
    border: none;
    outline:none;
    cursor: pointer;
    color: white;
    font-size: 20px;
}
.upload_input_select_file{
    width: 200px;
    height: 20px;
    margin-left: 10px;
    opacity: 1;
}
.upload_input_select_cover{
    width: 200px;
    height: 20px;
    margin-left: 10px;
    opacity: 1;
}
.upload_input_button:hover{
    color: blueviolet;
}
.upload_file_info{
    text-align: center;
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
    border-radius:25px;
    border: none;
    outline:none;
    cursor: pointer;
    color: white;
    font-size: 20px;
}
.upload_input_button{
    width: 200px;
    height: 60px;
    background-color: cornflowerblue;
    border-radius:25px;
    border: none;
    outline:none;
    cursor: pointer;
    color: white;
    font-size: 20px;
}
.upload_input_button:hover{
    color:hotpink;
}
</style>
